<template>
	<view v-if="orderDtail[0]">
		<view class="header" v-if="orderDtail[0].status === 1">
			<view class="iconfont icon-nopayment"></view>
			<view class="headerText">待付款</view>
			<view>{{countDownValue}}</view>
		</view>
		<view class="header" v-else-if="orderDtail[0].status === 8">
			<view class="iconfont icon-delete1"></view>
			<view class="headerText">已取消</view>
		</view>
		<view class="header" v-else-if="orderDtail[0].status === 2">
			<view class="iconfont icon-delete1"></view>
			<view class="headerText">待收货</view>
		</view>
		<view class="address">
			<view class="addressName">
				<text>收货人:</text>
				<text>{{orderDtail[0].address.name}}</text>
				<text>{{orderDtail[0].address.tel}}</text>
			</view>
			<view class="addressDetail">
				{{orderDtail[0].address.addr_text + orderDtail[0].address.detail}}
			</view>
		</view>
		<view class="contentItemGoods">
			<view class="ocItem" v-for="item in  orderDtail[0].goods" :key="item.goods_id">
				<image :src="item.img"></image>
				<view class="ocItemBox">
					<view class="ocItemTitle">{{item.name}}</view>
					<view class="ocItemTag">
						<text>{{item.attr}}</text>
					</view>
					<view class="ocItemPrice">
						<view>￥{{item.price}}</view>
						<view>
							<text>X</text>
							<text>{{item.num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="contentItem">
			<view>
				<text>商品总额</text>
				<text>￥{{orderDtail[0].all_amount}}</text>
			</view>
			<view>
				<text>运费</text>
				<text>￥{{orderDtail[0].base_money}}</text>
			</view>
			<view>
				<text>优惠</text>
				<text>￥{{orderDtail[0].reduction}}</text>
			</view>
			<view>
				<text>应付金额</text>
				<text>￥{{orderDtail[0].all_amount}}</text>
			</view>
		</view>

		<view class="orderInfo">
			<view class="orderInfoTitle">订单信息</view>
			<view class="orderInfoItem">
				<text>下单时间</text>
				<text>{{downOrderTime}}</text>
			</view>
			<view class="orderInfoItem">
				<text>订单编号</text>
				<text>{{orderDtail[0].order_sn}}</text>
			</view>

			<view class="orderInfoItem" v-show="orderDtail[0].cancel_text">
				<text>取消原因</text>
				<text>{{orderDtail[0].cancel_text}}</text>
			</view>
			<view class="orderInfoItem" v-show="orderDtail[0].express_no">
				<text>付款金额</text>
				<text>{{orderDtail[0].all_amount}}</text>
			</view>
			<view class="orderInfoItem" v-show="orderDtail[0].express_no">
				<text>支付方式</text>
				<text>{{orderDtail[0].pay_type==='alipay'?'支付宝':'微信'}}</text>
			</view>
			<view class="orderInfoItem" v-show="orderDtail[0].express_no">
				<text>支付时间</text>
				<text>{{payTime}}</text>
			</view>
			<view class="orderInfoItem" v-show="orderDtail[0].express_no">
				<text>物流公司</text>
				<text>{{kd}}</text>
			</view>
			<view class="orderInfoItem" v-show="orderDtail[0].express_no">
				<text>物流单号</text>
				<text>{{orderDtail[0].express_no}}</text>
			</view>
			<view class="orderInfoItem">
				<text>订单备注</text>
				<text>{{!orderDtail[0].desc? '无订单信息':orderDtail[0].desc}}</text>
			</view>
		</view>
		<view class="footer">
			<view class="footerLeft" @click="freeTell">
				<view class="iconfont icon-telephone"></view>
				<text>联系客服</text>
			</view>
			<view class="footerRight" v-if="orderDtail[0].status===8">
				<view @click="deleteOrder(orderDtail[0]._id,'del')">删除订单</view>
			</view>
			<view class="footerRight" v-if="orderDtail[0].status === 1">
				<view @click="cancelOrder(orderDtail[0]._id)">取消订单</view>
				<view class="footerRightTwo" @click="goPay(orderDtail[0]._id)">去付款</view>
			</view>
			<view class="footerRight" v-if="orderDtail[0].status === 2">
				<view class="footerRightTwo" @click="imitateDeliver">模拟发货</view>
			</view>
			<view class="footerRight" v-if="orderDtail[0].status === 3">
				<view class="footerRightTwo" @click="lookWuLiu(orderDtail[0])">查看物流</view>
				<view class="footerRightTwo" @click="deleteOrder(orderDtail[0]._id,'sure')">确认收货</view>
			</view>
			<view class="footerRight" v-if="orderDtail[0].status === 6">
				<view class="footerRightTwo" @click="goEvaluate(orderDtail[0])">去评价</view>
			</view>
		</view>

		<!-- 取消订单 -->
		<view>
			<u-popup v-model="cancleOrderShow" mode="bottom" border-radius="30" :mask-close-able="false">
				<view class="popupBox" >
					<view class="popupText">
						请您填写一下取消原因:
					</view>
					<view class="popupInput">
						<input type="text" v-model="cancelParams.cancel_text" placeholder="请输入">
					</view>
					<view class="popupBtn">
						<view class="popupBtnCancel" @click="cancelOrSureOrder(false)">取消</view>
						<view class="popupBtnSure" @click="cancelOrSureOrder(true)">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
	<view v-else class="loading">
		<u-loading color="red"></u-loading>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/stores/userInfo/userInfo'
	import {
		order
	} from '@/api'
	import {
		countDown
	} from './countDown'
	import {
		ref,
		reactive,
		watch,
		computed
	} from 'vue'
	// 订单
	let orderDetailParams = reactive({
		uid: '',
		orderId: '',
	})

	function goPay(_Id) {
		let orderId = encodeURI(JSON.stringify(_Id))
		uni.navigateTo({
			url:  `/pages/payPages/payPages?orderId=${orderId}`
		})
	}

	let kuaidi = {
		"SFEXPRESS": "顺丰",
		"STO": "申通",
		"YTO": "圆通",
		"ZTO": "中通",
		"HTKY": "汇通快递",
		"YUNDA": "韵达",
		"JD": "京东",
		"EMS": "EMS",
		"ZTO56": "中通快运",
		"AAEWEB": "AAE",
		"ARAMEX": "Aramex",
		"DHL": "内件	DHL",
		"DPEX": "DPEX",
		"DEXP": "D速",
		"EWE": "EWE",
		"FEDEX": "FedEx",
		"FEDEXIN": "FedEx国际",
		"PCA": "PCA",
		"TNT": "TNT",
		"UPS": "UPS",
		"ANJELEX": "安捷",
		"ANE": "安能",
		"ANEEX": "安能快递",
		"ANXINDA": "安信达",
		"EES": "百福东方",
		"HTKY": "百世快递",
		"BSKY": "百世快运",
		"FLYWAYEX": "程光",
		"DTW": "大田",
		"DEPPON": "德邦",
		"GCE": "飞洋",
		"PHOENIXEXP": "凤凰",
		"FTD": "富腾达",
		"GSD": "共速达",
		"GTO": "国通",
		"BLACKDOG": "黑狗",
		"HENGLU": "恒路",
		"HYE": "鸿远",
		"HQKY": "华企",
		"JOUST": "急先达",
		"TMS": "加运美",
		"JIAJI": "佳吉",
		"JIAYI": "佳怡",
		"KERRY": "嘉里物流",
		"HREX": "锦程快递",
		"PEWKEE": "晋越",
		"KKE": "京广",
		"JIUYESCM": "九曳",
		"KYEXPRESS": "跨越速运",
		"FASTEXPRESS": "快捷",
		"BLUESKY": "蓝天",
		"LTS": "联昊通",
		"LBEX": "龙邦",
		"YIMIDIDA": "壹米滴答",
		"RRS": "日日顺物流",
		"YXWL": "宇鑫物流",
		"DJ56": "东骏快捷",
		"FEDEX_GJ": "联邦快递国际",
		"AYCA": "澳邮专线",
		"CITY100": "城市100",
		"D4PX": "递四方速递",
		"GTSD": "广通",
		"HYLSD": "好来运快递",
		"JTKD": "捷特快递",
		"MB": "民邦快递",
		"MLWL": "明亮物流",
		"PANEX": "泛捷快递",
		"QXT": "全信通",
		"SAD": "赛澳递",
		"SDWL": "上大物流",
		"STWL": "速腾快递",
		"WJK": "万家康",
		"ZENY": "增益快递",
		"CAE": "民航",
		"ND56": "能达",
		"DHL": "际件	DHL_EN",
		"EFSPOST": "平安快递",
		"CHINZ56": "秦远物流",
		"QCKD": "全晨",
		"QFKD": "全峰",
		"APEX": "全一",
		"RFD": "如风达",
		"SFC": "三态",
		"SFWL": "盛丰",
		"SHENGHUI": "盛辉",
		"SDEX": "顺达快递",
		"SUNING": "苏宁",
		"SURE": "速尔",
		"HOAU": "天地华宇",
		"TTKDEX": "天天",
		"VANGEN": "万庚",
		"WANJIA": "万家物流",
		"EWINSHINE": "万象",
		"GZWENJIE": "文捷航空",
		"XBWL": "新邦",
		"XFEXPRESS": "信丰",
		"BROADASIA": "亚风",
		"YIEXPRESS": "宜送",
		"QEXPRESS": "易达通",
		"ETD": "易通达",
		"UC56": "优速",
		"CHINAPOST": "邮政包裹",
		"YFHEX": "原飞航",
		"YADEX": "源安达",
		"YCGWL": "远成",
		"YFEXPRESS": "越丰",
		"YTEXPRESS": "运通",
		"ZJS": "宅急送",
		"ZMKMEX": "芝麻开门",
		"COE": "中国东方",
		"CRE": "中铁快运",
		"ZTKY": "中铁物流",
		"CNPL": "中邮",
		"PJKD": "品骏快递",
		"INTMAIL": "邮政国际包裹",
		"FEDEX": "联邦快递",
		"PEISI": "配思航宇",
		"BDT": "八达通",
		"CJKD": "城际快递",
		"FKD": "飞康达",
		"HQSY": "环球速运",
		"JAD": "捷安达",
		"JGWL": "景光物流",
		"MK": "美快",
		"PADTF": "平安达腾飞快递",
		"QRT": "全日通快递",
		"RFEX": "瑞丰速递",
		"SAWL": "圣安物流",
		"ST": "速通物流",
		"SUBIDA": "速必达物流",
		"XJ": "新杰物流",
		"ZYWL": "中邮物流",
	}
	// 快递
	let kd = computed(() => {
		let {
			express_com
		} = orderDtail.value[0]
		if(express_com) {
			return Object.entries(kuaidi).filter(v => {
				if(v[0] === express_com ) {
					return v[1]
				}
			})[0][1]+'快递'
		}
	
	})
	// 模拟发货
	function imitateDeliver(){
		let { express_com, express_no} = orderDtail.value[0]
		let sendParams = {
			express_com: express_com,
			express_no: express_no,
			orderId: orderDetailParams.orderId
		}
		order.reqSend(sendParams).then(res=> {
			getOrderDetail()
		}).catch(err=>{
			console.log(err)
		})
	}
	
	
	// 支付时间
	let payTime = computed(()=>{
		return arrange(orderDtail.value[0].pay_time)
	})
	// 倒计时
	let time = null
	let countDownValue = ref('')
	// 订单详情
	let orderDtail = ref([])
	//  下单时间 
	let downOrderTime = ref('')
	// 整理时间
	function arrange(time) {
		let add_order = new Date(time)
		function zero(t) {
			return t > 10 ? t : '0' + t
		}
		let y = add_order.getFullYear()
		let m = zero(add_order.getMonth() + 1)
		let d = add_order.getDate()
		let H = zero(add_order.getHours())
		let M = zero(add_order.getMinutes())
		let S = zero(add_order.getSeconds())
		return y + '-' + m + '-' + d + ' ' + H + ':' + M + ':' + S
	}
	//  获取详情订单
	function getOrderDetail() {
		order.reqOrderDetail(orderDetailParams).then(res => {
			if (res.code === 1) {
				orderDtail.value = res.data
				downOrderTime.value = arrange(res.data[0].add_time)
				if (res.data[0].status === 1) {
					countDownValue.value = countDown(+new Date(), res.data[0].add_time)
					time = setInterval(() => {
						// 现在时间等于创建订单时间的半个小时 然后清除定时器 
						if (+new Date() >= res.data[0].add_time + 1800 * 1000) {
							clearInterval(time)
							time = null
							return
						}
						countDownValue.value = countDown(+new Date(), res.data[0].add_time)
					}, 1000)
				}
			}
		})
	}

	// 取消订单
	let cancelParams = reactive({
		cancel_text: '',
		orderId: ''
	})
	let cancleOrderShow = ref(false)

	function cancelOrder(orderId) {
		cancleOrderShow.value = true
		cancelParams.orderId = orderId
		uni.showLoading({
			title: '取消订单中'
		});
	}

	function cancelOrSureOrder(flag) {
		if (flag) {
			if (!cancelParams.cancel_text) {
				uni.$u.toast('请输入取消原因')
				return
			}
			order.cancelOrder(cancelParams).then((res) => {
				if (res.code === 1) {
					countDownValue.value = ''
					clearInterval(time)
					getOrderDetail()
					cancleOrderShow.value = false
					uni.hideLoading()
					uni.showToast({
						title: '取消订单成功',
						duration: 2000

					})
				}
			})
			return
		}
		// 取消订单
		cancleOrderShow.value = false
		uni.hideLoading()
		uni.showToast({
			title: '取消订单失败',
			duration: 2000

		})
	}
	//删除订单和确认收货
	function deleteOrder(orderId,type) {
		if(type === 'del') {
			uni.showModal({
				title: '提示',
				content: '确定删除订单吗？',
				success: function(res) {
					if (res.confirm) {
						order.deleteAddress({
							orderId
						}).then((res) => {
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						})
					} else if (res.cancel) {
						uni.$u.toast('取消删除订单')
					}
				}
			});
		}else {
			uni.showModal({
				title: '提示',
				content: '确定收货了吗？',
				success: function(res) {
					if (res.confirm) {
						order.reqShouHuo({
							orderId
						}).then((res) => {
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						})
					} else if (res.cancel) {
						uni.$u.toast('取消确认收货')
					}
				}
			});
		
		}
		
	}
	// 拉起电话
	function freeTell() {
		wx.makePhoneCall({
			phoneNumber: '15515884226', //仅为示例，并非真实的电话号码
			success: function() {
				console.log("拨打电话成功！")
			},
			fail: function() {
				console.log("拨打电话失败！")
			}
		})
	}
	
	// 查看物流
	function lookWuLiu(order){
		console.log(order)
		let { express_com, express_no } = order
		console.log(express_com,express_no)
		// uni.navigateTo({
		// 	url: `/pages/wuliu/wuliu?express_com=${express_com}&express_no=${express_no}`
		// })
	}
	// 去评价 
	function goEvaluate(detail){
		let enDetail = encodeURI(JSON.stringify(detail))
		uni.navigateTo({
			url: `/pages/evaluate/evaluate?enDetail=${enDetail}`
		})
	}
		
	
	// 页面初始化
	onLoad((option) => {
		let user = userStore()
		orderDetailParams.orderId = option.orderId
		user.getUserInfo().then(() => {
			orderDetailParams.uid = user.userInfo._id
			getOrderDetail()
		})
	})
	// 取消页面
	onUnload(() => {
		clearInterval(time)
		time = null
	})
</script>

<style scoped lang="scss">
	.loading {
		text-align: center;
	}

	.header {
		display: flex;
		align-items: flex-end;
		background-color: #fdda33;
		color: #fff;
		padding: 25rpx;
		font-size: 35rpx;

		.iconfont {
			font-size: 40rpx;
			margin-right: 15rpx;
			font-weight: 600;
		}
	}

	.address {
		padding: 20rpx 50rpx;
		border-bottom: 1rpx solid #eee;
		line-height: 45rpx;

		.addressName {
			font-size: 30rpx;

			text:nth-child(2) {
				margin: 0 20rpx;
			}
		}

		.addressDetail {
			font-size: 30rpx;
			color: #ccc;
		}
	}

	.contentItemGoods {
		padding: 20rpx 35rpx;
		background-color: #fff;

		.ocItem {
			padding: 20rpx 0;
			display: flex;
			border-bottom: 1px solid #eee;

			image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 10rpx;
			}
		}

		.ocItemBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-content: space-between;

			.ocItemTitle {
				font-size: 25rpx;
				white-space: pre-wrap;
			}
		}

		.ocItemTag {
			font-size: 15rpx;
			margin: 5rpx 0;

			text {
				color: #ccc;
				margin-right: 10rpx;
			}
		}

		.ocItemPrice {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 20rpx;

			view {
				display: flex;

				&:first-child {
					color: #fdd100;
				}

				&:last-child {
					display: flex;
					justify-content: center;
					align-items: flex-end;
					color: #ccc;

					text:first-child {
						transform: scale(0.8);
						display: inline-block;
						position: relative;
						top: 2rpx;
					}
				}
			}
		}


	}

	.contentItem {
		padding: 40rpx;
		font-size: 15rpx;
		line-height: 50rpx;

		view {
			display: flex;
			justify-content: space-between;
			align-items: center;

			text:first-child {
				color: #ccc;
			}
		}

		view:last-child {
			font-size: 20rpx;

			text:first-child {
				color: #000;
			}

			text:last-child {
				color: #fdd100;
			}
		}
	}


	.orderInfo {
		padding: 0 40rpx;
		padding-bottom: 120rpx;

		.orderInfoTitle {
			padding: 0 0 20rpx 0;
			font-size: 30rpx;
			border-bottom: 1rpx solid #eee;
		}

		.orderInfoItem {
			font-size: 15rpx;
			color: #ccc;
			padding: 10rpx 0;

			text:first-child {
				width: fit-content;
				margin-right: 30rpx;

			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15rpx;
		font-size: 15rpx;
		box-shadow: 0 0 5px #eee;

		.footerLeft {
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 15rpx;
				color: #fff;
				background-color: #fdd100;
				border-radius: 50%;
				padding: 5rpx;
				margin-right: 15rpx;
			}
		}

		.footerRight {
			display: flex;

			view {
				border: 1px solid #ccc;
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				text-align: center;

				&:active {
					opacity: 0.8;
				}
			}

			.footerRightTwo {
				margin-left: 15rpx;
				color: #fff;
				background-color: #fdd100;
				border: none;
			}
		}
	}

	.popupBox {
		padding: 30rpx;

		.popupText {
			font-size: 35rpx;
		}

		.popupInput {
			border: 1px solid #ccc;
			padding: 15rpx;
			border-radius: 10rpx;
			margin: 30rpx 0;
		}

		.popupBtn {
			display: flex;
			justify-content: space-evenly;
			font-size: 40rpx;

			.popupBtnCancel {
				text-align: center;
				width: 250rpx;
				color: #303133;
				padding: 20rpx 0;
				background-color: #f8f8f8;
			}

			.popupBtnSure {
				text-align: center;
				width: 250rpx;
				color: #fff;
				padding: 20rpx 0;
				background-color: #fdd100;
			}

			view {
				border-radius: 15rpx;
			}
		}
	}

	.activeDis {
		display: none;
	}
</style>
